<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的订单</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
        .overflowhidden2{
		    word-break: break-all;
		    text-overflow: ellipsis;
		    display: -webkit-box; 
		    -webkit-box-orient: vertical; 
		    -webkit-line-clamp: 4;
		    overflow: hidden; 
		    width: 2.7rem;
		    height: 0.73rem;
		    line-height: 0.1825rem;
        }
        .hd a{
        	text-align: center;
        }
        .Buyer-order .hd a{
        	padding-bottom: 0.12rem;
        }
        .Buyer-order .hd a.active{
        	line-height: initial;
        	padding-bottom: 0.12rem;
        }
        .shengyu{
        		font-size:0.12rem;
        		color:#f00
        }
        .boxwin{
        		position:fixed;
        		z-index:10000;
        		width:100%;
        		height:100%;
        		top:0;
        		left:0;
        		background:rgba(0,0,0,0.5);
        }
        .boxwin .flagsend{
        		position:absolute;
        		left:0;
        		right:0;
        		bottom:0;
        		top:0;
        		margin:auto;
        		width:2.5rem;
        		height:1.5rem;
        		border-radius:0.1rem;
        		background:#fff;
        }
        .boxwin .flagsend .flagtext{
        		width:100%;
        		height:1.1rem;
        		line-height:1.1rem;
        		text-align: center;
        		font-size:0.16rem;
        		color:#333
        }
        .boxwin .flagsend .btntwo{
        		display:flex;
        		flex-direction: row;
        		height:0.4rem;
        		border-top:1px solid #666;
        		margin-top:-1px;
        }
        .boxwin .flagsend .btntwo .surebtn,.boxwin .flagsend .btntwo .cancelbtn{
        		display: flex;
        		flex:1;
        		justify-content: center;
        		align-items: center;
        }
        .boxwin .flagsend .btntwo .surebtn{
        		background:red;
        		color:#fff;
        		border-radius:0 0 0.1rem 0;
        }
    </style>
</head>

<body>
<div id="loadingToast" class="weui_loading_toast" style="display:block;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <!-- :) -->
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">数据加载中...</p>
    </div>
</div>

<!--正文-->
<div id="content" style="display: none;">


<div class="Buyer-order">
    <div class="hd flex">
        <a href="javascript:;" :class="{active:isActive[5]}" @click="tab(6)">全部</a>
        <a href="javascript:;" :class="{active:isActive[0]}" @click="tab(1)">待付款</a>
        <a href="javascript:;" :class="{active:isActive[1]}" @click="tab(2)">待发货</a>
        <a href="javascript:;" :class="{active:isActive[2]}" @click="tab(3)">待收货</a>
        <a href="javascript:;" :class="{active:isActive[3]}" @click="tab(4)">待评价</a>
        <a href="javascript:;" :class="{active:isActive[4]}" @click="tab(5)">售后</a>
    </div>
    <div class="bd">
        <div v-if="datas.list.length == 0" style="text-align: center;margin-top: 50px;">
            暂无订单
        </div>
        <div v-else>
            <div class="bd-1 bd-0 " style="display: block;">
                <ul>
                    <li v-for="item in datas.list"  style="margin-bottom:.08rem;">
                        <div class="lists_con" v-for="(index,it) in item.ps" style="position: relative;background: #fff;border-bottom: 0.01rem solid #dcdcdc;margin-bottom: 0.2rem;">
                            <div class="title flex">
                                <img :src="it.store_image" alt="">
                                <span>{{it.store_name}}</span>
                                <em></em>
                                <i v-if="item.order_Msg == '待评价未打款'">待评价</i>
                                <i v-else>{{item.order_Msg}}</i>
                                <span style="color:#f00">{{it.produce[0].status==0?'(产品)':'(私人订制)'}}</span>
                               <!-- <span class="deleted" v-if="item.order_Msg== '待付款'" @click="deleshops(this)"><img src="../img/delete_shops.png" alt="" /></span>--><!--删除按钮--->
                            </div>
                            <div class="content clearfix">
                                <section v-for='itemsss in it.produce' class="clearfix produce" style="margin-bottom:.08rem;">
                                    <div style="width:100%;" @click="peoduce_detail(itemsss.produceId,itemsss.status,it.order_id)">
                                    	 <img :src="itemsss.produceHeadImage.split(',')[0]" alt="">
	                                    <div class="overflowhidden2" >
	                                        {{itemsss.produceDescribe}}
	                                    </div>
                                    </div>
                                   <p class="" style="font-size: 0.14rem;width: 100%;text-align:end;">
	                                    <!--<span>共<font class="num">1</font>件商品 合计:</span>-->
	                                    <em style="color: rgba(255, 0, 0, 0.9);">￥ <font class="price">{{it.produce_unit_price}}</font></em>
	                                    <i style="color: rgba(50, 50, 35, 0.25);">（含运费￥0.00）</i>
	                                </p>
                                    <p v-if="item.order_Msg== '待付款'" class="bottom flex shengyu" style="float: left;margin-top: 0.1rem;">
                                        剩余付款时间:
                                        <i class="shengtime"></i>
                                    </p>
                                    <p v-if="item.order_Msg== '待付款'" class="bottom flex" style="float: right;margin-top: 0.1rem;">
                                        <span style="margin-left:0;" class="fukuan" @click="ljfk(it.order_id,it.order_total_price,it.store_id,it.order_id,it.produce_unit_price,it.produce_num,it)">立即付款</span>
                                    </p>

                              		<!--<p v-if="item.order_Msg == '待收货'" class="bottom flex" style="position: absolute;right: 0;bottom: -40px;">
                                        <span @click="txmj(item.order_id)">提醒卖家</span>
                                    </p>-->
                                    <!--<p v-if="item.order_Msg == '待发货'" class="bottom flex" style="float: right;margin-top: 0.1rem;">
                                        <span>待发货</span>
                                        <span @click="txmj(item.order_id)">提醒卖家</span>
                                    </p>-->
                                    <p v-if="item.order_Msg == '待收货'" class="bottom flex" style="float: right;margin-top: 0.1rem;">
                                        <span @click="ckwl(it.order_id,itemsss.produceHeadImage,itemsss.produceDescribe)">查看物流</span>
                                        <span @click="qrsh(it.order_id,it.order_total_price)">确认收货</span>
                                    </p>
                                    <p v-if="state == '4'" class="bottom flex" style="float: right;margin-top: 0.1rem;">
                                        <span @click="applySh(it.order_id,it.order_total_price)">申请售后</span>
                                        <span @click="ljcomment(it.order_id,itemsss.produceHeadImage.split(',')[0],itemsss.produceDescribe)">待评价</span>
                                    </p>
                                    <p v-if="state == '5'" class="bottom flex" style="float: right;margin-top: 0.1rem;">
                                        <span @click="ckjd(it.order_id,it.statusRemind,it.order_total_price)">查看进度</span>
                                        
                                    </p>
                                    <b class="tel" v-if="state == '5'" style="display: block;margin-top: 0.2rem;">收货电话：{{it.user_Phone}}</b>
                                </section>                               
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>
</div>
<div class="boxwin" style="display:none">
	<div class="flagsend">
		<p class="flagtext">是否取消订单?</p>
		<div class="btntwo">
			<div class="cancelbtn">取消</div>
			<div class="surebtn">确定</div>
		</div>
	</div>
</div>
<script src='../js/vue.js'></script>
<script src='../js/vue-resource.min.js'></script>

<script>
    $(function () {
        setTimeout(function() {
            $("#loadingToast").hide();
            $("#content").show();
        }, 1000);
        new Vue({
            el: 'body',
            data: {
                data1:[],
                data2:[],
                uid:'',
                produceid:'',
                storeId:'',
                state:'',
                datas:[],
                isActive:[],
                flag:false,
                timeText:new Array(),//属于时间毫秒数
                oneFlag:true,//只让倒计时函数执行一次
                timeArr:new Array(),//时间倒计时数组
                textArr:new Array(),//倒计时时间
                dajishiArr:'',//获取倒计时的数据
            },
            ready: function () {
                var status = getQueryString("status");
                var _self = this;
                _self.uid = sessionStorage.getItem("uid");
                if(status == 1){
                    _self.isActive = [true,false,false,false,false];
                    _self.state = status;
                    //alert(status);
                    _self.getOrderList();//获取订单列表
                    if(this.oneFlag){
                    		
                    		//_self.timeArr = [1411833324000,1511433324000,1611833324000,1314833324000,1513333324000,1612833324000];//数组添加
/*                    		var timeS = _self.timeArr
                    		_self.upTime(timeS);//执行倒计时函数
                   	 	this.oneFlag = false;
                   	 	console.log(this.dajishiArr)*/
                    };
                }else if(status == 2){
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                    _self.isActive = [false,true,false,false,false];
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                }else if(status == 3){
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                    _self.isActive = [false,false,true,false,false];
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                }else if(status == 4){
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                    _self.isActive = [false,false,false,true,false];
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                }else if(status == 5){
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                    _self.isActive = [false,false,false,false,true];
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                }else if(status == 6){
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                    _self.isActive = [false,false,false,false,false,true];
                    _self.state = status;
                    _self.getOrderList();//获取订单列表
                }
                _self.getSellorder_all_num();
            },
            methods: {
            		getSellorder_all_num:function (){//获取到各个状态的数量，并且显示到右上角
                    var _self = this;
                    this.$http.get(base_url + 'ZITAOHUI/user/orderNum', {
                        params: {
                        	//userId,identity,state
                            userId: _self.uid,
                            identity: 1,//1代表买家 2代表卖家，
                            //state:_self.state //不传表示全部
                        }
                    }).then(function (response) {
                        var arr = ['全部','未付款','待发货','待收货','待评价','售后'];
                        var arrnum= [1,2,3,789,45,78];
                        for(var i=0;i<response.data.extend.num.length;i++){
                            	arrnum[i] = response.data.extend.num[i].user_order_num;
                        };
                        for(var i=0;i<arr.length;i++){
                        		$('.hd a').eq(i).text( arr[i]+"("+ (arrnum[i] < 100 ? arrnum[i]:"99+")+")" )
                        };
                    }, function (data) {
                        console.log('erroe'+data);
               	   })
                },
                deleshops:function(t){//删除代付款商品
                		$('.boxwin').fadeIn(300);
                },
	            	peoduce_detail:function(id,t,oid){
	            		if(t ==1||t == 2){
	            			window.location.href = 'personaldetail.html?p_id='+id+'&o_id='+oid+'&flag_us=2'
	            		}else{
	            			window.location.href = "buy-info-page.3.html?p_id="+id
	            		}
	            	},
                tab:function (status){
                    //选项卡切换事件
                    var _self =this;
                    if(status == 1){
                        _self.isActive = [true,false,false,false,false,false];
                        _self.state = 1;
                        _self.getOrderList();
/*	                    if(this.oneFlag){
	                   	 	this.upTime();//执行倒计时函数
	                   	 	this.oneFlag = false;
	                    };*/
                    }else if(status == 2){
                        _self.isActive = [false,true,false,false,false,false];
                        _self.state = 2;
                        _self.getOrderList();
                    }else if(status == 3){
                        _self.isActive = [false,false,true,false,false,false];
                        _self.state = 3;
                        _self.getOrderList();
                    }else if(status == 5){
                        _self.isActive = [false,false,false,false,true,false];
                        _self.state = 5;
                        _self.getOrderList();
                    }else if(status == 4){
                        _self.isActive = [false,false,false,true,false,false];
                        _self.state = 4;
                        _self.getOrderList();
                    }else if(status == 6){
                        _self.state = 6;
                        _self.isActive = [false,false,false,false,false,true];
                        _self.getOrderList();
                    }
                     _self.getSellorder_all_num();
                },
                ckwl:function (oid,img,pro){
                    console.log(oid);
                    window.location.href = "View-Logistics.html?oid="+oid+"&img="+img+"&pro="+encodeURI(encodeURI(pro));
                },
                qrsh:function (oid){
	                this.$http.get(base_url+"ZITAOHUI/order/confirm",{
	                     params:{
	                         orderid:oid
	                     }
	                }).then(function (res){
	                    console.log(res);
	                    if(res.body.code == 1){
	                        alert("收货成功");
	                        window.location.href = window.location.href;
	                    }
	                })
                },
                console: function (t) {
                    console.log(t)
                },
                ckjd:function (oid,status,money){
                    if(status == 5){
                        alert("卖家已同意");
                        window.location.href = "ckjd.html?oid="+oid+"&price="+money ;
                    }else if(status== 4){
                        alert("卖家已同意您的申请，请耐心等待");
                    }else{
                        alert("卖家正在处理，请耐心等待");
                    }
                },
                Remind_Ship: function (t) {
                    let order_id = t.item.order_id;
                    $.ajax({
                        url: base_url + 'ZITAOHUI/remindsellers',
                        data: {
                            order_id: order_id,
                        },
                        success: (data) => {
                            //alert(data.extend.list)
                        },
                        error: function () {
                        	
                        }
                    })
                },
                go_Evaluation: function (t) {
                    window.location.href = '../page/Make-an-evaluation.html?order_id=' + t.item.order_id;
                    let tt = {
                        img:t.item.produce[0].produceHeadImage.split(',')[0],
                        des:t.item.produce[0].produceDescribe
                    }
                    window.sessionStorage.setItem('produce_info', JSON.stringify(tt))
                },
                ljcomment:function (oid,img,pro){
                    window.location.href = "Make-an-evaluation.html?oid="+oid+"&img="+img+"&pro="+encodeURI(encodeURI(pro));
                },
                txmj:function (oid){
                  //提醒卖家
	                this.$http.get(base_url+"ZITAOHUI/remindsellers",{params:{
	                      order_id:oid
	                }}).then(function (res){
	                     if(res.body.code == 1){
	                         alert("提醒成功");
	                    }else{
	                         alert("系统繁忙，请稍候");
	                    }
	                },function (){
	
	                })
                },
                confirm:function(t){
                    $.ajax({
                        url: base_url + 'ZITAOHUI/order/confirm',
                        data: {
                            order_id: t.item.order_id,
                        },
                        success: (data) => {
                            //alert(data.extend.list)
                        },
                        error: function () {
                        }
                    })
                },
                ljfk:function (oid,price,store_id,oid,produce_unit_price,produce_num,it){
                    //立即付款点击事件
                    var _self = this;
                    //order = 1 代表是从订单的立即付款过来的
                    sessionStorage.seller_storeId = store_id;
                    window.location.href = "my-address.html?uid="+sessionStorage.getItem("uid")+"&storeId="+store_id+"&orderType=2&order=1&oid="+oid+"&produce_unit_price="+produce_unit_price+"&produce_con="+produce_num+'&price='+it.order_total_price+"&order_num="+it.order_num
                    +"&auction_id="+it.auction_id;
					//window.location.href = "userPay.html?num="+oid+"&price="+price+"&orderType=2";
                },
                applySh:function (oid,price){
                	//申请售后
                		window.location.href = "shouhou.html?oid="+oid+"&price="+price;
                },
                getOrderList:function (){
                    var _self =this;
                    //alert(_self.state);
                    this.$http.get(base_url + 'ZITAOHUI/user/order', {
                        params: {
                            userId: _self.uid,
                            value:1,//1代表买家
                            state:_self.state
                        }
                    }).then(function (response) {
                        var all_data = response.data.extend;
                        this.$set('datas', all_data);
                        $.each(all_data.list,function(index,item){
                    		if(item.order_Msg=="待付款"){
                    			_self.$set('dajishiArr',item.ps)
                    			$.each(item.ps,function(index2,item2){
                    				_self.timeArr[index2] = item2.order_create_time;
                    				
                    			});
	                    		var timeS = _self.timeArr
	                    		_self.upTime(timeS);//执行倒计时函数
	                   	 		_self.oneFlag = false;
                    		}
                        });
                        this.flag = all_data.list.length>=1?true:false;
                    }, function () {

                    })
                },
                //倒计时
                upTime:function(timems){
                		var _this = this;
					var interval = setInterval(go,1000);
					function go(){
						for(var i=0;i<timems.length;i++){
							_this.textArr[i] = computeNat(timems[i]);
						};
						$.each(_this.textArr,function(index,item){
							$('.lists_con').eq(index).find('.shengtime').text(item);
							item=='付款时间已到'?$('.lists_con').eq(index).find('.fukuan').remove():''
						})
					};
					function computeNat(timeStamp){//计算
	                		var remainTime = timeStamp+ 24*60*60*1000-new Date().getTime();//获取当前时间到1970年得毫秒数
	                    if (remainTime == 0 || remainTime < 0 ) {
	                         return  _this.timeText = "付款时间已到";
	                        	clearInterval(interval);
	                    } else {
	                        var days = Math.floor(remainTime /1000 / 60/60/24);
	                        var hours = Math.floor(remainTime/ 1000 / 60 / 60-days*24);
	                        var minutes = Math.floor(remainTime/ 1000 / 60-days*24*60-hours*60);
	                        var seconds =  Math.floor(remainTime/1000-days*24 * 60 * 60-hours*60*60-60*minutes);
	                        //return days+"天"+ hours + "小时" + minutes + "分钟" + seconds + "秒"
	                        return hours + "小时" + minutes + "分钟" + seconds + "秒"
	                    };
	                }
               }
            },
            watch:{//监听函数
            		textArr:{
            			handler:function(newvalue,oldvalue){
            				console.log(newvalue,oldvalue)
            			},
            			deep:true
            		}
            }
        })
    })
</script>
</body>

</html>